<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title></title>
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="/statics/js/artDialog/artDialog.js"></script>
    <script src="/statics/js/artDialog/iframeTools.js"></script>
    <script src="/statics/js/posfixed.js"></script>
    <style>
    	.row{ margin-top:5px;}
    </style>
</head>
<body>
<div class="container">
	<div class="panel panel-default" style="margin-top:10px">
   		<div class="panel-heading">
                <input type="text" class="att_title form-control" name="att_title" placeholder="属性" style="width:200px;">
        </div>
      <div class="panel-body" id="panel-body">

      </div>      
      <div class="panel-footer">
      	<div id="att-status"></div>
        <div class="row">
            <div class="col-xs-3">
                <button type="button" class="btn btn-info" id="att_add">添加</button>
            </div>
            <div class="col-xs-9">
                <button id="submitdata" type="button" class="btn btn-info">生成</button>
            </div>
        </div>     	 
      </div>
    </div>
</div>
<script>
$(document).ready(function(){	
var json = JSON.parse(art.dialog.data('json'));

$(".att_title").val(json.title);
var html ="";
$.each(json.choix,function(i,e){
	desc = typeof(e.desc)!=='undefined'?e.desc:"";
	html += '<div class="row"><div class="col-xs-4"><input type="text" class="form-control choix_name" placeholder="属性名" value="'+e.name+'"></div><div class="col-xs-2"><input type="text" class="form-control  choix_price" placeholder="价格" value="'+e.price+'"></div><div class="col-xs-6"><input type="text" class="form-control choix_desc" placeholder="备注" value="'+desc+'"></div></div>';

})
$('#panel-body').append(html);





$("#submitdata").on("click",function(){
	var att_title =  $(".att_title").val();
	if(att_title.trim() == ''){return}
	var res = new Object();
	var att = $("#panel-body").find('.row');
	var temp = [];
	att.each(function(index,element) {			
		var name = $(".choix_name").eq(index).val().trim();
		var price = $(".choix_price").eq(index).val().trim();
		var desc =  $(".choix_desc").eq(index).val().trim();
		if(name.trim()!='')
		{
			var reg1 =  /^\d+$/;
			var choix = new Object();							
			choix.name = name;
			choix.price = price.match(reg1)?price:"0";
			desc.trim()!=''?choix.desc=desc:"";
			temp.push(choix);				
		}
	});
	if(temp.length>0)
	{
		res.title = $(".att_title").val();
		res.choix = temp;
		$("#att-status").html(JSON.stringify(res));
	}
	else{ alert('至少需要1个选项');}
});
	
$("#att_add").on("click",function() {
	var x = $('.row');			
	if(x.length<6){
		var str = '<div class="row"><div class="col-xs-4"><input type="text" class="form-control choix_name" placeholder="属性名" value=""></div><div class="col-xs-2"><input type="text" class="form-control  choix_price" placeholder="价格" value="0"></div><div class="col-xs-6"><input type="text" class="form-control choix_desc" placeholder="备注" value=""></div></div>';
		$('#panel-body').append(str);
		}
	else{
		alert('最多允许添加6项');
	}
});

});
</script>
</body>
</html>